<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app_select">
    <select v-model="selected" name="country">
        <option value="">选择一个国家</option>
        <option value="USA">USA</option>
        <option value="CHINA">CHINA</option>
    </select>
    <div id="output">
        选择的国家是：{{selected}}


    </div>
    <br/>

    v-model修饰符<br/>
<!--    当使用lazy 修饰后，当然输入完成后，点击enter,后才会同步更新-->
    .lazy修饰符：
    <input v-model.lazy="text">
    输入的值:{{text}}
    <br/>

    .number修饰符：
<!--    如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值-->
    <input v-model.number="age" type="number">
    输入的值:{{age}}
    <br/>

    .trim修饰符：
<!--    如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：-->
    <input v-model.trim = "msg">
    输入的值：{{msg}}
</div>

<script>
    let v = new Vue({
        el: '#app_select',
        data: {
            selected: '',
            text: '',
            age: '',

            msg: ''
        },
        watch: {
            text: function (value) {
                console.log(this.text);
            }
        }
    });
</script>

</body>
</html>